<template>
  <div class="vp-raw">
    <div class="flex flex-col content-center">
      <vue-okr-tree
        :label-class-name="computeLabelClassName"
        :data="testData"
        direction="vertical"
        node-key="id"
        show-collapsable
        :render-content="renderContent"
      ></vue-okr-tree>
    </div>
  </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { VueOkrTree } from 'vue-okr-tree-vue3'
import 'vue-okr-tree-vue3/dist/vue-okr-tree.css'
function renderContent(h, node) {
  return (
    <div>
      <div class="diy-con-name">{node.data.label}</div>
      <div class="diy-con-content">{node.data.content}</div>
    </div>
  )
}
const testData = ref([
  {
    id: 1,
    label: 'xxx科技有有限公司',
    children: [
      {
        id: 2,
        label: '产品研发部',
        children: [
          {
            id: 3,
            label: '研发-前端',
          },
          {
            id: 4,
            label: '研发-后端',
          },
          {
            id: 5,
            label: 'UI 设计',
          },
        ],
      },
      {
        id: 6,
        label: '销售部',
        children: [
          {
            id: 7,
            label: '销售一部',
          },
          {
            id: 8,
            label: '销售二部',
          },
        ],
      },
      {
        id: 9,
        label: '财务部',
      },
    ],
  },
])

function computeLabelClassName(node) {
  // console.log('node', node.level)
  if (node.level > 2) {
    return 'other-node border'
  }
  return 'border'
}
</script>
<style>
.other-node {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/* .border {
  border: 1px solid red;
  border-radius: 3px;
} */
.org-chart-node-children {
  display: flex;
  align-items: stretch;
}
.org-chart-node-label-inner {
  /* min-height: 100px; */
  /* height: 100%; */
}
.org-chart-node {
  /* border: 1px solid red;
  border-radius: 3px; */
}
.org-chart-node-label {
  border: 1px solid red;
  border-radius: 3px;
}
</style>
<style scoped>
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.content-center {
  justify-content: center;
}
</style>
